<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <title>TodoList</title>
</head>

<body>
    <div id="app">
        <input type="text">
        <button id="btn">提交</button>
        <ul id="list">

        </ul>
    </div>
    <script crossorigin="anonymous" integrity="sha384-LVoNJ6yst/aLxKvxwp6s2GAabqPczfWh6xzm38S/YtjUyZ+3aTKOnD/OJVGYLZDl"
        src="https://lib.baomitu.com/jquery/3.5.0/jquery.min.js"></script>
    <script>
        //M 模型  V 视图  P 控制器
        function Page() {

        }
        $.extend(
            Page.prototype, {
            init: function () {
                this.bindEvents()
            },
            bindEvents: function () {
                var btn = $('#btn');
                btn.on('click', $.proxy(this.handleBtnClick, this))
            },
            handleBtnClick: function () {

                var inputElem = $("input");
                var inputValue = inputElem.val();

                // alert(inputValue);
                var ulElem = $('#list')
                ulElem.append('<li>' + inputValue + '</li>');
                inputElem.val('');
            }
        }
        )

        var page = new Page();
        page.init();
    </script>
</body>

</html>